<template>
  <div class="container">
    <iframe
      :src="url"
      scrolling="yes"
      frameborder="0"
      seamless="seamless"
      allowfullscreen="true"
      allowtransparency="true"
      class="container--item__iframe">
    </iframe>
    <span class="container--span" @click="backOrder"></span>
  </div>
</template>

<script>
export default {
  name: 'payment',
  data() {
    return {
      url: null,
    };
  },
  methods: {
    backOrder() {
      this.$router.push({ name: 'myOrder' });
    },
  },
  created() {
    this.url = this.$store.state.paymentUrl;
  },
};
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
  font-size: 0;
}
.container{
  position: relative;
  width: 100vw;
}
.container--span{
  display: inline-block;
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: .1rem;
  right: .1rem;
  opacity: 0;
}
.container--item__iframe{
  width: 100vw;
  height: 100vh;
}
</style>
